

/**
 * Created by chenbaoxiang on 2020/11/30.
 */
import React,{Component} from 'react';
import {
  StyleSheet,
  View,
  Text,
  Image,
  TouchableOpacity,

} from 'react-native';
import { ScreenWidth } from "../../config";

export default class NavigationHeader extends Component {

  static defaultProps = {
    headBackColor: '#151E3F',                               // 默认背景色
    isShowLeftIcon: true,                                   // 默认是否显示左按钮
    isBlackLeftImg:false,                                   // 是否是黑色返回按钮,true的时候不设置leftImg
    leftImg: require('./image/icon-back-white.png'),        // 默认返回键是白色,isBlackLeftImg为false的时候有效,默认白色箭头,可传其他图片
    titleText: '',                                          // 标题
    titleFont: 16,                                          // 标题字号
    titleColor: '#fff',                                     // 标题字体颜色
    rightImage: null,                                       // 右按钮图片
    rightTitle: null,                                       // 右按钮文字
    rightTitleColor: '#fff',                                // 右按钮字体颜色
    rightTitleFont: 16,                                     // 右按钮字体大小
  };

  render() {
    const { headBackColor, isShowLeftIcon } = this.props
    return (
      <View style={[styles.container, { backgroundColor: headBackColor }]}>
        <View style={styles.headBack}>
          {isShowLeftIcon && this._renderLeftBtn()}
          {this._renderTitle()}
          { this._renderRight()}
        </View>


      </View>
    )

  }
  // 左按钮
  _renderLeftBtn() {
    const { isBlackLeftImg, leftImg } = this.props
    return (
      <View style={styles.leftImgbackStyle}>
        <TouchableOpacity  onPress={()=> this.props.navigation.goBack()}>
          <Image
            source={ isBlackLeftImg ? require('./image/icon-back-black.png') :  leftImg}
            style={{ width: 26, height: 26 }}
          />
        </TouchableOpacity>
      </View>
    )
  }
  // 中间
  _renderTitle() {
    const { titleText, titleFont, titleColor } = this.props
    return (
      <View style={styles.titleBackStyle}>
        <Text style={{ fontSize: titleFont, color: titleColor,fontWeight: 'bold' }}>{titleText}</Text>
      </View>

    )
  }
  // 右边
  _renderRight() {
    const { rightImage, rightTitle, rightTitleColor ,rightTitleFont} = this.props
    return (
      <View style={styles.rightImgbackStyle}>
         <TouchableOpacity
          onPress={() => {
            this.props.clickRight? this.props.clickRight() : null
          }}
        >
          {rightImage &&  <Image source={rightImage} style={{ width: 26, height: 26 }}/>}
          {rightTitle && <Text style={{ fontSize: rightTitleFont, color: rightTitleColor}}>{rightTitle}</Text>}
        </TouchableOpacity>        
      </View>

    )
  }
}



const styles = StyleSheet.create({
  container: {
    height: Platform.OS == "ios" ? 80 : 50,
    width: ScreenWidth,

    justifyContent: 'flex-end',
  },
  headBack: {
    width: ScreenWidth,
    height: 44,
    justifyContent: 'space-between',
    flexDirection: 'row'

  },
  leftImgbackStyle: {
    width: 44,
    height: 44,
    marginTop: 0,
    marginLeft: 8,
    justifyContent: "center",
    alignItems: "center",
  },
  titleBackStyle: {
    width: ScreenWidth / 2,
    height: 44,
    justifyContent: 'center',
    alignItems: 'center'
  },
  rightImgbackStyle: {
    width: 44,
    height: 44,
    marginTop: 0,
    marginRight: 15,
    justifyContent: "center",
    alignItems: "center",
  },

})

